﻿<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
	String path = request.getContextPath() + "/";
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<base href="<%=basePath%>">
<title>公告</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style2/d_common.css">
<link rel="stylesheet" href="css/style2/common1.css">
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script src="js/layer/layer.js"></script>
<style type="text/css">
		.mengban{
			position:fixed;
			width: 100%;
			height: 100%;
			top: 0px;
			left: 0px;
			background: #000;
			-webkit-opacity: 0.5;
			-moz-opacity: 0.5;
			-ms-opacity: 0.5;
			-khtml-opacity: 0.5;
			opacity: 0.5;
			filter:alpha(opacity=50);
			display: none;
		}

	</style>
<style type="text/css">
.gglist {
	position: relative;
	width: 100%;
	margin: 13% auto 0 auto;
	height: 40%;
}

.gglist ul {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	float: left;
	    text-align: center;
}

.gglist ul li {
	position: relative;
	width: 25%;
	float: left;
	height: 100%;
	border-radius: 10px;
	overflow: hidden;
}

.gglist ul li a {
	position: relative;
	display: block;
	width: 94%;
	height: 100%;
	background: #fff;
	border-radius: 10px;
	box-shadow: 10px 0px 20px #666;
	color: #444;
}

.buttondiv {
	position: relative;
	width: 100%;
	height: 75px;
	line-height: 300px;
	text-align: center;
	cursor: pointer;
}

.buttondiv a {
	position: relative;
	display: inline-block;
	height: 75px;
	line-height: 75px;
	font-size: 24px;
	background: #00be5a;
	border-radius: 10px;
	padding: 0 20px;
	color: #fff;
	margin: 0 10px;
}

.buttondiv a img {
	display: block;
	margin: 17px 5px 0 -5px;
	float: left;
}

.buttondiv a:nth-child(3) img {
	margin: 25px 5px;
}

.h3 {
	position: relative;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 24px;
}

.p1 {
	position: relative;
	width: 90%;
	padding: 5% 5%;
	height: 52%;
	bottom: 0px;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-height: 40px;
	font-size: 16px;
}

.p2 {
	position: absolute;
	width: 100%;
	height: 24%;
	bottom: 0px;
	background: #1b87ae;
	border-radius: 0 0 10px 10px;
}

.p2 .titlespan {
	display: block;
	width: 90%;
	padding: 0 5%;
	text-align: center;
	height: 40px;
	line-height: 40px;
	color: #fff;
	font-size: 17px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.p2 .datespan {
	display: block;
	width: 90%;
	padding-right: 10%;
	text-align: right;
	height: 20px;
	line-height: 20px;
	color: #fff;
	font-size: 12px;
}
/*弹窗样式*/
.popWindow {
	position: fixed;
	width: 800px;
	height: 500px;
	left: 50%;
	top: 50%;
	margin-left: -400px;
	margin-top: -250px;
	background: #fff;
	color: #444;
	border-radius: 10px;
	display: none;
	font-size: 16px;
}

.popWindow .titlep {
	position: relative;
	width: 96%;
	padding: 0 2%;
	height: 50px;
	line-height: 50px;
	border-radius: 10px 10px 0 0;
	color: #fff;
	font-size: 18px;
}

.popWindow .titlep img {
	float: right;
	display: block;
	margin-top: 2px;
}

.popWindow .artContent {
	position: relative;
	height: 300px;
	width: 90%;
	padding: 10px 5%;
	overflow-y: auto;
}

.popWindow .artime {
	position: relative;
	height: 40px;
	width: 90%;
	padding: 0px 5%;
	text-align: right;
}

.popWindow .join {
	display: block;
	position: relative;
	margin: 10px auto;
	width: 150px;
	padding: 0 10px;
	text-align: center;
	line-height: 60px;
	height: 60px;
	font-size: 18px;
	color: #fff;
	border-radius: 5px;
	background: #ff8402;
	display: none;
}

.clear {
	clear: both;
}

@
keyframes myfirst {
	from {transform: rotateY(0deg);
}

to {
	transform: rotateY(360deg);
}

}
@
-webkit-keyframes myfirst /* Safari 与 Chrome */ {
	from {transform: rotateY(0deg);
}

to {
	transform: rotateY(360deg);
}

}
@
keyframes my2 {
	from {transform: rotateY(360deg);
}

to {
	transform: rotateY(0deg);
}

}
@
-webkit-keyframes my2 /* Safari 与 Chrome */ {
	from {transform: rotateY(360deg);
}

to {
	transform: rotateY(0deg);
}
}
</style>
</head>

<body>
	<div id="back">
		<div class="header">
			<div class="logo">
				<a href="javascript:void(0);"><img src="img/n_logo.png" alt="">&nbsp;
				</a>
			</div>
			<div class="user">
				<c:if test="${user!=null }">
					<img
						src="${user.pic==null?'img/new_head.png':user.pic==''?'img/new_head.png':user.pic }"
						alt="">
					<div class="admin">
						<span class="name">${user.name }</span><span class="number">【${user.cardno
							}】</span>
					</div>
				</c:if>
				<c:if test="${user==null }">
					<img src="img/man.png" alt="">
					<a id="logBtn">登录</a>
					<span>|</span>
					<a id="regBtn">注册</a>
				</c:if>
			</div>
		</div>
		<!--end header-->
		<div class="main" style="padding: 1px 0 0 0;">
			<div class="gglist">
				<ul>
				</ul>
			</div>
			<div class="buttondiv">
				<a id="prevpage"><img src="img/n_left.png" />左翻页</a> <a
					id="nextpage"><img src="img/n_right.png" />右翻页</a> <a
					 href="declaimer/first?guid=${guid}&devicecode=${devicecode}"
					style="background:#ba3433;margin-top:75px;"><img
					src="css/style2/img/rlist_back.png" />返回首页</a>
			</div>


		</div>
		<!--end main-->
		<div class="footer">
			<div class="footer-content">
				<c:if test="${user==null }"><img src="https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${ticket }" alt="" class="footerimg1"></c:if>
		    	<c:if test="${user!=null }"><img src="img/wx.png" alt="" class="footerimg1"></c:if>
				<ul>
					<li style="margin-left: 36px;margin-top: 77px;font-size: 18px;"><span></span>欢迎使用信昇达朗读亭</li>
					<li style="margin-left: 36px;font-size: 18px;"><span></span>朗读亭提供朗读录制服务</li>
				</ul>
			</div>
			<div class="copyright" style="margin-top: 72px;font-size: 18px;">
				${c.footer }
			</div>
		</div>
	</div>

<div class="mengban"></div>
<div id="ruleTip" >
	<p class="c-title">朗读声明</p>
	<ol>
		<li>用户在使用信昇达朗读亭之前，均应仔细阅读本声明，一旦使用，即视为接受本声明的全部内容。声明如下：</li>
		<li>1、任何个人或机构都不得朗读或录制色情、暴力或政治敏感素材；</li>
		<li>2、任何个人或机构通过朗读亭朗读的个人或机构素材，信昇达不对该素材内容之合法性、准确性、真实性、适用性、安全性负责；信昇达不代表该素材内容的任何主张或立场；</li>
		<li>3、朗读亭配有全程监控录像，使用过程中，不得蓄意破坏或损坏朗读亭设备，否则将追究其法律责任；</li>
		<li>同意上诉规则可进入朗读，取消退出。</li>
	</ol>
	<p><a class="btn" id="c-agree">同意</a><a class="btn" id="c-cancel">取消</a></p>
</div>
	<!--公告以及活动的弹窗-->
	<div class="popWindow">
		<p class="titlep">
			<span></span> <img src="css/style2/img/closeBtn.png" id="closeimg" />
		</p>
		<div class="artContent"></div>
		<p class="artime"></p>
		<a class="join" onclick="joinA();">我要参加</a>
	</div>
<!--点击登录按钮的弹出面板-->
<div id="loginBoard">
	<div class="title clear">
		<p class="c-title fl">朗读亭用户登录</p>
		<span class="closeBtn fr"></span>
	</div>
	<form>
		<ul id="login-namePwd">
			<li><span class="account"></span><input type="text" id="l-username"></li>
			<li><span class="pw"></span><input type="password" id="l-userpwd"></li>
			<li class="zhzc"><a >账号注册</a>
			<li><a class="btn" id="loginNow">立即登录</a>
		</ul>
	</form>
	<!--数字字母键盘-->
	<div class="keyBoard" id="keyBoard2">
		<p class="num-a"><a>1</a>
			<a>2</a>
			<a>3</a>
			<a>4</a>
			<a>5</a>
			<a>6</a>
			<a>7</a>
			<a>8</a>
			<a>9</a>
			<a>0</a>
		</p>
		<p class="key-a"><a>Q</a>
			<a>W</a>
			<a>E</a>
			<a>R</a>
			<a>T</a>
			<a>Y</a>
			<a>U</a>
			<a>I</a>
			<a>O</a>
			<a>P</a>
		</p>
		<p class="key-a">
			<a>A</a>
			<a>S</a>
			<a>D</a>
			<a>F</a>
			<a>G</a>
			<a>H</a>
			<a>J</a>
			<a>K</a>
			<a>L</a>
		</p>
		<p class="key-a">
			<a>Z</a>
			<a>X</a>
			<a>C</a>
			<a>V</a>
			<a>B</a>
			<a>N</a>
			<a>M</a>
			<a>Del</a>
			<a>←</a>
		</p>
	</div>
</div>

<!--点击注册按钮的弹出面板-->
<div id="regBoard">
	<div class="title clear">
		<p class="c-title fl">朗读亭用户注册</p>
		<span class="closeBtn fr"></span>
	</div>
	<form>
		<ul id="login-namePwd">
			<li><span><img src="img/account.png" alt=""></span><input type="text" id="username" placeholder="输入账号"></li>
			<li><span><img src="img/pw.png" alt=""></span><input type="password" id="userpwd" placeholder="输入7-12位的密码"> </li>
			<li><span><img src="img/pw.png" alt=""></span><input type="password" id="copypwd" placeholder="再一次输入密码"></li>
			<li><a class="btn" id="registNow">立即注册</a>
		</ul>
	</form>
	<!--数字字母键盘-->
	<div class="keyBoard" id="keyBoard1">
		<p class="num-a"><a>1</a>
			<a>2</a>
			<a>3</a>
			<a>4</a>
			<a>5</a>
			<a>6</a>
			<a>7</a>
			<a>8</a>
			<a>9</a>
			<a>0</a>
		</p>
		<p class="key-a"><a>Q</a>
			<a>W</a>
			<a>E</a>
			<a>R</a>
			<a>T</a>
			<a>Y</a>
			<a>U</a>
			<a>I</a>
			<a>O</a>
			<a>P</a>
		</p>
		<p class="key-a">
			<a>A</a>
			<a>S</a>
			<a>D</a>
			<a>F</a>
			<a>G</a>
			<a>H</a>
			<a>J</a>
			<a>K</a>
			<a>L</a>
		</p>
		<p class="key-a">
			<a>Z</a>
			<a>X</a>
			<a>C</a>
			<a>V</a>
			<a>B</a>
			<a>N</a>
			<a>M</a>
			<a>Del</a>
			<a>←</a>
		</p>
	</div>
</div>

	<script src="js/jquery-ui.min.js"></script>
	<script src="layui/layui.js"></script>
	<script>
		$(function() {
			backColor();
			popWindow();
			chosePage();
			heightAuto();
			register();
      login();
      var reginput=$("#regBoard input");
      var loginput=$("#loginBoard input");
      reginput.focus(function(){
         var inputId=$(this).attr("id");
         keyBoard(inputId);
      });
      loginput.focus(function(){
         var inputId=$(this).attr("id");
         keyBoard(inputId);
      });
      var keybtn=$(".keyBoard a");

      /*禁止文字被选中*/
      keybtn.each(function(){
         $(this).attr("onselectstart","return false");
      });
      //用户注册
      $("#registNow").click(function(){
         if($("#username").val()==''){
            layer.msg("用户名不能为空！");
            return;
         }
         if($("#copypwd").val()==''){
            layer.msg("用户密码不能为空！");
            return;
         }
         if($("#copypwd").val()!=$("#userpwd").val()){
            layer.msg("两次密码不一致！");
            return;
         }
         $.ajax({
            async : false,
            cache : false,
            type : 'post',
            dataType : "json",
            url :  'declaimer/save_user?cardno='+$("#username").val()+'&guid=${guid}&password='+$("#copypwd").val(),// 请求的action路径
            success : function(data) {
               if(data.state=='1'){
                  layer.msg(data.message);
                  $("#loginBoard").fadeOut();
                  $(".mengban").fadeOut();
               }else{
                  layer.msg(data.message);
               }
            }
         });
      });
      //用户登录
      $("#loginNow").click(function(){
         if($("#l-username").val()==''){
            layer.msg("用户名不能为空！");
            return;
         }
         if($("#l-userpwd").val()==''){
            layer.msg("用户密码不能为空！");
            return;
         }
         $.ajax({
            async : false,
            cache : false,
            type : 'post',
            dataType : "json",
            url :  'declaimer/login?cardno='+$("#l-username").val()+'&guid=${guid}&devicecode=${devicecode }&password='+$("#l-userpwd").val(),// 请求的action路径
            success : function(data) {
               if(data.state=='1'){
                  window.location.reload();
               }else{
                  layer.msg(data.message);
               }
            }
         });
      });
		});

		/*高度自适应*/
		function heightAuto() {
			var wH = $(window).height();
			var gglist = $(".gglist");
			var p1 = $(".p1");
			gglist.height(300);
			p1.css({
				"line-height" : p1.height() / 4 + "px"
			});
			if (wH < 800) {
				gglist.css({
					"width" : "80%",
					"margin-top" : "8%"
				});
			}
			;
		};

		/*控制公告/活动显示不一样的颜色*/

		function backColor() {
			var gg = $(".h3");
			gg.each(function() {
				var ctype = $(this).attr("ctype");
				var parent = $(this).parent();
				if (ctype == "1") {
					$(this).css("color", "#ff8402");
					$(this).text("活动");
					parent.find(".p2").css("background", "#ff8402");
				} else {
					$(this).css("color", "#1b87ae");
					$(this).text("公告");
					parent.find(".p2").css("background", "#1b87ae");
				}
			});
		}
		/*公告活动的翻页效果*/
		/*全局页码*/
		var page = 1;
		var tp = 1;
		function chosePage() {
			var nextp = $("#nextpage");
			var prevp = $("#prevpage");
			nextp.click(function() {
				if(page+1>tp){
					layer.msg("暂无更多公告/活动！");
				}else{
					var list = $(".gglist ul li");
					list.css({
						"animation" : "my2 4s",
						"-webkit-animation" : "my2 4s"
					});
					page += 1;
					searchList();
				}
			});
			prevp.click(function() {
				if (page - 1 > 0) {
					var list = $(".gglist ul li");
					list.css({
						"animation" : "my2 4s",
						"-webkit-animation" : "my2 4s"
					});

					page -= 1;
					searchList();
				} else {
					layer.msg("已经是第一页啦");
				}
			});

		}
searchList();
		/*模拟分页*/
		function searchList() {
			var listHtml = [];
			$.ajax({
				async : false,
				cache : false,
				type : 'post',
				dataType : "json",
				url : 'declaimer/activitylist?guid=${guid }&pageSize=4&pageNo='+page, // 请求的action路径
				error : function(XMLHttpRequest, textStatus,
						errorThrown) {
					alert("请求失败！");
				},
				success : function(data) {
					tp = data.totalPage;
					var data = data.list;
					for ( var i = 0; i < data.length; i++) {
						var ggORhd;
						if (data[i].type == '0') {
							ggORhd = "公告";
						} else {
							ggORhd = "活动";
						}
						listHtml.push('<li><a><h3 class="h3" data-id="'+data[i].id+'" ctype="'+data[i].type+'">'
										+ ggORhd
										+ '</h3>'
										+ '<p class="p1">'
										+ data[i].content
										+ '</p>'
										+ '<p class="p2">'
										+ '<span class="titlespan">'
										+ data[i].title
										+ '</span>'
										+ '<span class="datespan">'
										+ data[i].startdate
										+ '</span>'
										+ '</p></a></li>');
					}
					if(data.length==0){
						listHtml.push('<img src="img/no_notice.png"/>');
						$("#prevpage").hide();
						$("#nextpage").hide();
					}else{
						$("#prevpage").show();
						$("#nextpage").show();
					}
					$(".gglist ul").html(listHtml.join(''));
					backColor();
					popWindow();
				}
			});

		}

		var activityid;
		/*公告活动的点击弹窗*/
		function popWindow() {
			var gghd = $(".gglist ul a");
			var pop = $(".popWindow");
			gghd.click(function() {

				var ctype = $(this).find(".h3").attr("ctype");
				pop.fadeIn();
				pop.find(".titlep span")
						.text($(this).find(".titlespan").text());
				pop.find(".artime").text($(this).find(".datespan").text());
				pop.find(".artContent").html($(this).find(".p1").html());
				activityid = $(this).find(".h3").attr("data-id");
				/*判断是公告还是活动*/
				if (ctype == "0") {
					pop.find(".titlep").css("background", "#1b87ae");
				} else {
					pop.find(".titlep").css("background", "#ff8402");
					pop.find(".join").css("display", "block");
				}
			});
			pop.find("#closeimg").click(function() {
				pop.fadeOut();
				pop.find(".join").css("display", "none");
			});

		}
		function joinA(){
			 $.ajax({
            async : false,
            cache : false,
            type : 'post',
            dataType : "json",
            url :  'declaimer/findUser?devicecode=${devicecode }',// 请求的action路径
            error : function(XMLHttpRequest, textStatus, errorThrown) {
               //layer.msg("请求失败！");
            },
            success : function(data) {
               //cll：判断是否登录
               if(data.state=="1"){
                  window.location.href="<%=basePath%>declaimer/mtype?guid=${guid }&activityid="+activityid+"&devicecode=${devicecode}&cardno="+data.message;
               }else{
               var pop = $(".popWindow");
               pop.fadeOut();
				pop.find(".join").css("display", "none");
                 $("#logBtn").click();
               }
            }
         });
		}
		
	function register(){
      var regBtn=$("#regBtn");
      var mengban=$(".mengban");
      var regBoard=$("#regBoard");
      var cancel=$("#cancel");

      regBtn.click(function(){
         regBoard.fadeIn();
         mengban.fadeIn();
         $("#username").focus();
      });
      cancel.click(function(){
         regBoard.fadeOut();
         mengban.fadeOut();
      });
   }
   function login(){
      var logBtn=$("#logBtn");
      var mengban=$(".mengban");
      var regBoard=$("#loginBoard");
//      var cancel=$("#l-cancel");
      var agree=$("#c-agree");
      var cancel=$("#c-cancel");
      var ruleTip=$("#ruleTip");
		
      logBtn.click(function(){
         $.ajax({
            async : false,
            cache : false,
            type : 'post',
            dataType : "json",
            url :  'declaimer/findUser?devicecode=${devicecode }',// 请求的action路径
            error : function(XMLHttpRequest, textStatus, errorThrown) {alert(3)
               //layer.msg("请求失败！");
            },
            success : function(data) {
               //cll：判断是否登录
               if(data.state=="1"){
                  layer.confirm('是否退出此次登录？', {
                     btn: ['是','否'] //按钮
                  }, function(){
                     $.ajax({
                        async : false,
                        cache : false,
                        type : 'post',
                        dataType : "json",
                        url :  'declaimer/removeDeviceUse?devicecode=${devicecode }',// 请求的action路径
                        success : function(data) {
                           layer.msg('已退出', {icon: 1});
                           regBoard.fadeIn();
                           mengban.fadeIn();
                           $("#l-username").focus();
                        }
                     });

                  }, function(){
                     
                  });
               }else{
                 //须知弹框
                 ruleTip.fadeIn();
                 //同意按钮点击跳转登录弹窗
                 agree.click(function () {
                   regBoard.fadeIn();
                   mengban.fadeIn();
                   ruleTip.hide();
                   $("#l-username").focus();  //用户名聚焦
                 });
                 //取消按钮
                 cancel.click(function () {
                   ruleTip.fadeOut();
                 });
               }
            }
         });

      });
      cancel.click(function(){
         regBoard.fadeOut();
         mengban.fadeOut();
      });
      $('.closeBtn').click(function(){
        $('#loginBoard').hide()
        $('#regBoard').hide()
         mengban.fadeOut();
      });
   }

   function keyBoard(inputId){
      var inputNow=$("#"+inputId);
      var keybtn=$(".keyBoard a");

      keybtn.unbind("click");
      keybtn.click(function(){
         var val='';
         if($(this).text()=="D"){
            inputNow.val('');
         }else if($(this).text()=="←"){
            var ival=inputNow.val();
            var val=ival.substring(0,ival.length-1);
            inputNow.val(val);
         }else{
            var val=$(this).text();
            var ival=inputNow.val();
            inputNow.val(ival+val);
         }
      });
   }
	</script>
</body>

</html>